<template>
  <div class="screen">
    <div class="screen-title">
      <div class="title-box-left">
        <div class="weather">多云 16-21℃</div>
        <div class="time"> {{ time }}</div>
      </div>
      <div class="title-box-center" @click="gotoStystem">
        <span class="title-box-text">数据监测大屏</span>
      </div>
      <div class="title-box-right">
       
      </div>
    </div>
    <chinaMap class="screen-content" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import chinaMap from './stock/index.vue'
import { format } from "date-fns";
export default {
  name: 'Screen',
  components: {
    chinaMap,
  },
  data() {
    return {
      time: "",
      nowTime: ''
    }
  },
  created() {
  },
 
  mounted() {
    document.querySelector('body').classList.add('screen')
    this.set_time();
    this.timer = setInterval(() => {
      this.set_time();
    }, 1000);
  },
  destroyed() {
    document.querySelector('body').classList.remove('screen')
  },
  methods: {
    // parseTime,
    /**
     * 全屏
     */
    fullScreen() {
      if (!screenfull.isEnabled) {
        // 如果不允许进入全屏，发出不允许提示
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    /**
     * 跳转回系统
     */
    gotoStystem() {
      this.$router.push('/')
    },
    goToRouter(button) {
      this.$router.push(button.path)
    },
    /**
     * 聚焦
     */
    focus() {
      bus.$emit('focus', true)
    },
    set_time() {
      this.time = format(new Date(), "yyyy-MM-dd HH:mm:ss");
    },
  }
}
</script>

<style lang="scss" scoped>
.screen {
  height: calc(100vh);
  background-image: url("../../assets/screen/bg.jpg");
  background-size: cover;
  background-position: center center;
  & > .screen-title {
    display: flex;
    justify-content: space-between;
    height: 150px;
    padding: 1.6vh 2px;
    background-image: url("../../assets/screen/titlebg.png");
    background-size: 100% 100%;
    & > .title-box-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: 1;
      background-image: url("../../assets/screen/titleleft.png");
      background-size: 100% 100%;
      .weather{
        padding: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CCDCFF;
      }
      .time{
        padding: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CCDCFF;
      }
    }
    & > .title-box-center {
      width: 650px;
      text-align: center;
      user-select: none;
      > img {
        width: 206px;
        height: 43px;
      }
      .title-box-text{
        width: 494px;
        height: 33px;
        font-size: 34px;
        font-family: DOUYU;
        font-weight: normal;
        color: #FFFFFF;

        background: linear-gradient(0deg, #CCDCFF 0%, #FFFFFF 47.4365234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .title-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        }
        .button {
          width:140px;
          height: 64px;
          line-height: 64px;
          cursor: pointer;
          font-size: 16px;
          color: #989a9c;
        }
        .button:hover {
          text-shadow: 0 0 20px #16e9e3;
          color: #16e9e3;
        }
        .button.active {
          text-shadow: 0 0 20px #16e9e3;
          // background-image: url("../../assets/screen/top_btn_bg.png");
          background-position: center center;
          background-size: 100% 100%;
          color: #16e9e3;
          overflow: hidden;
        }
    }
    & > .title-box-right {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      background-image: url("../../assets/screen/titleright.png");
      background-size: 100% 100%;
      .weather{
        padding: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CCDCFF;
      }
      i { font-size: 16px; }
      .title-box-right-button {
        cursor: pointer;
        user-select: none;
        text-align: center;
        width:110px;
        font-size: 14px;
        line-height:24px;
        margin-right:14px;
        border: 1px solid #17fff4;
        border-radius: 3px;
        background: rgba(0, 36, 103, 0.5);
        box-shadow: 0px 0px 4px 0px #1afff4;
      }
    }
  }
  & > .screen-content {
    height: calc(100% - 20vh);
    margin-top: -20px;
  }
}
</style>

<style lang="scss" scoped>
::v-deep {
  .charts {
    padding:0 !important;
  }
  .monitor-title {
    // background-image: url(../../assets/screen/boxTop.png);
    width: 16vw;
    height: 40px;
    display: block;
    background-size: 100% 100%;
    padding-left: 80px;
    padding-top: 1.1vh;
    font-size: 16px;
    color: #fff;
  }
  .image-bottom {
    // background-image: url(../../assets/screen/bgBottom.png);
    position: absolute;
    bottom: -2vh;
    left: 0;
    width: 25vw;
    height: 2vh;
    display: block;
    background-size: 100% 100%;
    transform: rotate3d(0, 1, 0, 180deg);
  }
  .category-title {
    // background-image: url(../../assets/screen/cagTitle.png);
    background-size: 100% 100%;
    display: inline-block;
    width: 180px;
    height: 3vh;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 3vh;
    padding-left: 15px;
    font-size: 14px;
    color: #ffffff;
  }
  .el-tabs.not-button {
    .el-tabs__active-bar {
      background-color: #17fff4;
      height: 0.3vh;
    }
    .el-tabs__item {
      width: 211px;
      text-align: center;
      color: rgba(255, 255, 255, 0.75);
      font-size: 16px;
      &.is-active {
        color: #17fff4;
      }
    }
    .el-tabs__nav-wrap::after {
      background-color: rgba(255, 255, 255, 0.75);
    }
  }
  .el-radio-group.tab-button {
    position: relative;
    z-index: 999;
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-image: linear-gradient(
        0deg,
        #5f97ff 0%,
        rgba(95, 151, 255, 0) 100%
      );
      border: 1px solid #87d2ff;
      color: #17fff4;
      background-color: transparent;
      border-radius: 0;
    }
    .el-radio-button .el-radio-button__inner {
      background: rgba(62, 100, 172, 0.3);
      border: 1px solid #87d2ff;
      color: rgba(255, 255, 255, 0.75);
      border-radius: 0;
    }
    .el-radio-button--medium .el-radio-button__inner {
      padding: 0.48vw 1.041667vw;
    }
  }
  .layer-bg {
    position: relative;
    border: 2px solid #1f314c;
    background-image: linear-gradient(
      0deg,
      rgba(22, 47, 89, 0.4) 0%,
      rgba(22, 47, 89, 0.8) 100%
    );
  }
}
</style>
<style lang="scss">
.screen {
  .el-picker-panel {
    background: #13294d;
    border: 1px solid #87d2ff;
  }
  .el-date-table th {
    color: #fff;
  }
  .el-year-table td .cell {
    color: #fff;
  }
  .el-date-table__row {
    color: #fff;
  }
  .el-picker-panel__footer {
    background: #13294d;
  }
  .el-button--mini {
    background-image: linear-gradient(
      0deg,
      #5f97ff 0%,
      rgba(95, 151, 255, 0) 100%
    );
    border: 1px solid #87d2ff;
    color: #17fff4;
    background-color: transparent;
    border-radius: 5;
  }
  .el-picker-panel__icon-btn {
    color: #fff;
  }
  .el-date-picker__header-label {
    color: #fff;
  }
  .el-year-table td.disabled .cell {
    color: #9a9c9e;
    background-color: transparent;
  }
  .el-loading-mask {
    background-color: transparent;
  }
}
</style>
